<template>
  <view class="hot_rec">
    <view v-if="hotRecommend.length !== 0" class="moduledata_title">
      <image
        class="title_bg"
        src="../../static/img/common/title_bg.png"
      ></image>
      热门推荐
    </view>
    <block v-for="item in hotRecommend" :key="item.productId">
      <view class="module_title">
        <Goods :item="item"> </Goods>
      </view>
    </block>
  </view>
</template>

<script>
import Big from "big.js";
import { home } from "../../services/index.js";
import Goods from '../components/goods/index.vue';
import { productHotRecommend } from "../../api/product.js";
export default {
  data() {
    return {
      hotRecommend: [],
      totalPage: 0, //总页数
      current: 1, //当前页码
      size: 20, //每一页的商品数量
      hasMore: "more",
      dataList: [],
    };
  },
  components: {
    Goods,
  },
  mounted() {
    this.homeModule();
  },
  methods: {
    homeModule() {
      productHotRecommend().then((res) => {
        const {code, data, msg} = res
        if(code === 200) {
          data.forEach((e) => {
            e.originalPrice = new Big(e.originalPrice).div(100);
            e.currentPrice = new Big(e.currentPrice).div(100);
          });
          this.hotRecommend = data;
        }
      })
    },
  },
};
</script>

<style scoped>

.hot_rec {
  width: 100vw;
  background-color: rgb(247, 247, 247);
}

.moduledata_title {
  /* background-color: #fff; */
  text-align: center;
  padding: 20rpx 0 40rpx;
  position: relative;
  height: 50rpx;
  font-size: 48rpx;
  margin-bottom: 20rpx;
}

.title_bg {
  width: 315rpx;
  height: 48rpx;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 8rpx;
}
.look_more {
  text-align: center;
  padding: 15rpx 0;
  font-size: 36rpx;
  color: #333333;
  /* background-color: #fff; */
}

.module_title {
    box-shadow: 0rpx 9rpx 30rpx 0rpx rgba(6, 4, 3, 0.19);
    border-radius: 20rpx;
    margin-bottom: 4%;
    background-color: #fff;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 15rpx;
}
</style>
